<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>汇率换算</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
    <style>
      body,html{
        background: #f3f3f3;
      }
      .list{
        padding-top: 35px;
        background: #fdd802;
      }
      .list-pub{
        border-bottom: #fafafa solid 0.5px;
        background: #fff;
      }
      .list-pub:first-child{
        background: #fdd802 url(../../image/audit/indexback.jpg) no-repeat bottom center;
        background-size: 100%;
      }
      .main-box{
        width: 100%;
        height: 90px;
        position: relative;
        color: #000;
      }
      .main-text{
        position: absolute;
        left: 25px;
        top: 18px;
        font-size: 12px;
        line-height: 24px;
        text-align: left;
      }
      .list-pub:first-child .main-box input{
        font-size: 36px;
      }
      .main-box input{
        display: block;
        width: 100%;
        padding: 18px 0;
        height: 90px;
        position: absolute;
        right: 23px;
        top: 0;
        background: transparent;
        text-align: right;
        font-size: 30px;
        color: #000;
      }
      input::-webkit-input-placeholder {
        color: #000;
      }
      .mint-cell-wrapper{
        padding: 0
      }
      .mint-cell-swipe-button{
        line-height: 90px;
      }
      .index-back .mint-cell-wrapper{
        background-size: 120% 0px;
      }
      .login-btn{
        width: 60%;
        margin-left: 20%;
        height: 38px;
        margin-top: 38px;
        border-radius: 19px;
        background: linear-gradient(to right, #fcba13, #fce604);
        font-size: 12px;
        color: #fff;
        line-height: 38px;
        box-shadow: 0 0 5px 5px rgba(0,0,0,0.05);
        text-align: center;
      }
      .list-pub .mint-cell:last-child{
        background-size: 100% 0;
      }
      .aui-list-item-inner.aui-swipe-handle {
        overflow-x: hidden;
        position: relative;
        z-index: 1;
        background-color: #ffffff;
      }
      .aui-swipe-btn {
        position: absolute;
        right: 0;
        z-index: 0;
        height: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-flex: 1;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
                justify-content: space-between;
        -webkit-box-align: center;
        -webkit-align-items: center;
                align-items: center;
      }
      .aui-swipe-btn .aui-btn {
        border-radius: 0;
        height: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
                align-items: center;
      }
      .donghua {
        -webkit-transition-duration:300ms;
        transition-duration:300ms;
      }
    </style>
</head>

<body>
    <div class="index-back" id="auditIndex" v-cloak>
        <div class="aui-content aui-margin-b-15 list">
            <ul class="aui-list">
                <li class="aui-list-item list-pub" v-for="(item, index) in rataData" :key="index" v-if="index == 0">
                    <div class="aui-list-item-inner  main-box">
                        <div class="">
                            {{item.en}}
                            <div>{{item.zh}}</div>
                        </div>
                        <input type="number" v-model="item.value" placeholder="0.00" :id="item.id" @input="changeCell(item)">
                    </div>
                </li>
                <li class="aui-list-item list-pub" v-for="(item, index) in rataData" :key="index" v-if="item.isSelect == '已选' && index>0 ">
                    <div class="aui-list-item-inner aui-swipe-handle main-box">
                        <div class="">
                            {{item.en}}
                            <div>{{item.zh}}</div>
                        </div>
                        <input type="number" v-model="item.value" placeholder="0.00" :id="item.id" @input="changeCell(item)">
                    </div>
                    <div class="aui-swipe-btn" @click="deleteSection(item.en)">
                        <div class="aui-btn aui-btn-danger">删除</div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="login-btn" @click="addCell" id="ttt">{{title}}</div>
    </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/aui-list-swipe.js"></script>
<script>
apiready = function() {
}
var vm = new Vue({
    el: '#auditIndex',
    data: {
        value: '',
        title: '添加货币',
        scroll: '',
        rataData: [],
        dataList: [
            { zh: '人民币', en: 'CNY', isSelect: '已选', rate: '1', value: '' },
            { zh: '美元', en: 'USD', isSelect: '已选', rate: '0.1439', value: '' },
            { zh: '港元', en: 'HKD', isSelect: '已选', rate: '1.1281', value: '' },
            { zh: '日元', en: 'JPY', isSelect: '', rate: '16.0924', value: '' },
            { zh: '英镑', en: 'GBP', isSelect: '', rate: '0.1121', value: '' },
            { zh: '欧元', en: 'EUR', isSelect: '', rate: '0.1263', value: '' }
        ]
    },
    methods: {
        deleteSection: function(id) {
            for (var i = 0; i < this.rataData.length; i++) {
                if (id === this.rataData[i].en) {
                    this.rataData[i].isSelect = ''
                }
            }
            $api.setStorage('rataData', this.rataData)
            api.closeWin({
                name: 'cell'
            });
        },
        addCell: function() {
            api.openWin({
                name: 'cell',
                url: 'cell.html',
                pageParam: {
                    rataData: this.rataData
                }
            });
            $api.setStorage('rataData', this.rataData)
        },
        changeCell: function(item) {
            for (var i = 0; i < this.rataData.length; i++) {
                if (item.rate === this.rataData[i].rate) {
                    this.rataData[i].value = item.value
                } else {
                    this.rataData[i].value = (this.rataData[i].rate / item.rate * item.value).toFixed(2)
                }
            }
            $api.setStorage('rataData', this.rataData)
        },
        myTouchMove: function() {
            document.activeElement.blur()
        }
    },
    mounted: function() {
        window.addEventListener("touchmove", this.myTouchMove)
        this.rataData = $api.getStorage('rataData')
    }
})

function funcGoto() {
    vm.rataData = $api.getStorage('rataData')
}

var swipe = new auiListSwipe(function(ret) {});
</script>

</html>